<template>
	<view class="content">
		<view class="nav">
			<uni-nav-bar title="工作时间" backgroundColor="transparent" left-icon="left" @clickLeft="goback">
				<block slot="right">
					<text @click="onSave" style="font-size: 28rpx;">保存</text>
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="date card">
			<view class="header">
				<view class="circle flex_r_around">
					<text></text>
				</view>
				<view class="text">设置工作周期</view>
			</view>
			<view class="list">
				<text @click="allDate" :id="date.length == dateList.length ? 'select' : ''">全部</text>
				<text @click="onDate(index)" v-for="(item,index) in dateList" :key="index" :id="date.indexOf(index) > -1 ? 'select' : ''">{{item}}</text>
			</view>
		</view>
		
		<view class="time card">
			<view class="header">
				<view class="circle flex_r_around">
					<text></text>
				</view>
				<view class="text">设置工作周期</view>
			</view>
			
			<view class="list">
				<text :id="time.indexOf(index) > -1 ? 'select' : ''" @click="onTime(index)" v-for="(item,index) in timeList" :key="index">{{item.text}}<i v-if="item.is_night">夜间</i></text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateList:[
					'星期一','星期二','星期三','星期四','星期五','星期六','星期日'
				],
				timeList:[
					{
						text:'00:00',
						is_night:true,
					},
					{
						text:'01:00',
						is_night:true,
					},
					{
						text:'02:00',
						is_night:true,
					},
					{
						text:'03:00',
						is_night:true,
					},
					{
						text:'04:00',
						is_night:false,
					},
					{
						text:'05:00',
						is_night:false,
					},
					{
						text:'06:00',
						is_night:false,
					},
					{
						text:'07:00',
						is_night:false,
					},
					{
						text:'08:00',
						is_night:false,
					},
					{
						text:'09:00',
						is_night:false,
					},
					{
						text:'10:00',
						is_night:false,
					},
					{
						text:'11:00',
						is_night:false,
					},
					{
						text:'12:00',
						is_night:false,
					},
					{
						text:'13:00',
						is_night:false,
					},
					{
						text:'14:00',
						is_night:false,
					},
					{
						text:'15:00',
						is_night:false,
					},
					{
						text:'16:00',
						is_night:false,
					},
					{
						text:'17:00',
						is_night:false,
					},
					{
						text:'18:00',
						is_night:false,
					},
					{
						text:'19:00',
						is_night:false,
					},
					{
						text:'20:00',
						is_night:false,
					},
					{
						text:'21:00',
						is_night:false,
					},
					{
						text:'22:00',
						is_night:true,
					},
					{
						text:'23:00',
						is_night:true,
					},
					{
						text:'23:59',
						is_night:true,
					},
				],
			
				date:[],
				
				
				time:[],
				
				timeStart:-1,
				timeEnd:-1,
				timeFlag:false,
				
				flag:true,
			}
		},
		methods: {
			goback(){ uni.navigateBack() },
			onSave(){
				if(!this.flag){return}
				if(!this.date.length){
					return this.$util.msg('请选择日期')
				}
				if(this.timeEnd<0 && this.timeStart<0){
					return this.$util.msg('请选择时间范围')
				}
				this.flag = false
				let data = {
					available_days:this.date.length>1 ? this.date.join(',') : this.date[0] , 
					start_time: this.timeList[this.timeStart].text,
					end_time: this.timeList[this.timeEnd].text
				}
				this.request.httpTokenRequest({
					url: "technician.technician/saveAuthInfo",
					method: "post"
				}, data).then(res => {
					this.flag = true
					this.$util.modal(res.msg)
					if (res.code == 0) {
						
					}
				}, error => {})	
			},
			
			allDate(){
				this.date = this.date.length == this.dateList.length ? [] : [0,1,2,3,4,5,6]
			},
			onDate(e){
				if(this.date.indexOf(e) > -1){
					this.date.forEach((item,index)=>{
						if(item == e){
							this.date.splice(index,1)
						}
					})
				}else {
					this.date.push(e)
				}
			},
			onTime(e){
				if(this.timeFlag){
					this.timeEnd = e
					for(let i = this.timeStart ; i<=this.timeEnd ; i++){
						this.time.push(i)
					}
					if(this.timeStart > this.timeEnd){
						for(let i = this.timeStart ; i<this.timeList.length ; i++){
							this.time.push(i)
						}
						for(let i = 0 ; i<=this.timeEnd ; i++){
							this.time.push(i)
						}
					}
					this.timeFlag = false
				}else {
					this.time = []
					this.time.push(e)
					this.timeStart = e
					this.timeFlag = true
				}
			},
			
		},
		
		onLoad() {
			
			let auth = uni.getStorageSync('authInfo')
			if(auth.start_time && auth.end_time){
				this.timeFlag = true
				this.timeList.forEach((item,index)=>{
					if(item.text == auth.end_time){
						this.timeEnd = index
					}
					if(item.text == auth.start_time){
						this.timeStart = index
					}
				})
				this.onTime(this.timeEnd)
				if(auth.available_days){
					if(auth.available_days.indexOf(',')>-1){
						this.date = auth.available_days.split(',')
						// this.date = JSON.parse(JSON.stringify(this.date))
						this.date.forEach((item,index)=>{
							this.date[index] = Number(item)
						})
					}else {
						this.date = [auth.available_days]
					}
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;
	}
	
	.content {
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 44px) 30rpx 20rpx;
	}
	
	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 15rpx 30rpx 15rpx;
		margin-top: 30rpx;
		.header {
			display: flex;
			align-items: center;
			padding-left: 15rpx;
			margin-bottom:30rpx;
	
			.circle {
				width: 40rpx;
				height: 40rpx;
				background: #F5F7F8;
				border-radius: 50%;
				margin-right: 10rpx;
	
				text {
					width: 10rpx;
					height: 10rpx;
					background: #B9D2F8;
					border-radius: 50%;
				}
			}
	
			.text {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}
		}
	}

	.date {
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			text {
				width: 135rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background: #EBEBEB;
				font-size: 28rpx;
				color: #08090A;
				line-height: 60rpx;
				text-align: center;
				margin: 15rpx;
			}
			#select {
				background: #2E7EFA;
				color: #FFF;
			}
		}
	}

	.time {
		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			text {
				width: 106rpx;
				height: 60rpx;
				border-radius: 29rpx;
				border: 1rpx solid #D7D7D7;
				font-size: 24rpx;
				color: #545454;
				line-height: 60rpx;
				text-align: center;
				position: relative;
				margin: 10rpx;
				i {
					width: 43rpx;
					height: 23rpx;
					background: #545454;
					border-radius: 11rpx;
					font-size: 16rpx;
					color: #FFD359;
					line-height: 23rpx;
					text-align: center;
					font-style: normal;
					position: absolute;
				}
			}
			#select {
				background: rgba(46,126,250,0.1);
				border: 1rpx solid #2E7EFA;
				color: #2E7EFA;
			}
		}
	}

</style>
